<template>
    <div class="about">
      <vue-particles
          color="#00ffff"
          :particleOpacity="1"
          :particlesNumber="120"
          shapeType="star"
          :particleSize="4"
          linesColor="#fff"
          :linesWidth="1"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="150"
          :moveSpeed="2"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="true"
          clickMode="push"
          style="height:200%"
      >
      </vue-particles>
        <div class="site-content" style="margin-top: -650px">
            <div class="content-warp">
                <div class="about-site about-info">
                    <section-title><span>❤</span>关于博客</section-title>
                    <div class="info-card">
                        <p>若兮博客由Java、Vue.js驱动(2020.11 - 2021.4 开发周期6个月),主域名(<span>❤</span><a target="_blank" href="https://gitee.com/fengziy/Gblog" style="color: #ff6d6d;">www.ruoqing.love</a>)。</p>
                        <p>作者检验两年痛苦的Java钻研之旅,博客定名为若兮博客,并配备统一若兮后台管理系统(<span>❤</span><a target="_blank" href="https://gitee.com/fengziy/Gblog" style="color: #ff6d6d;">admin.ruoqing.love</a>),后续将会开发更多Java分布式、微服务系统,比如若兮论坛、若兮搜索等等。</p>
                        <p><a target="_blank" href="https://gitee.com/fengziy/Gblog" style="color: #ff6d6d;">项目介绍</a> | <a target="_blank" href="https://github.com/fengziye/Gblog" style="color: #ff6d6d;">若兮开发团队核心成员</a>&nbsp;★蟹蟹关注哟</p>
                    </div>
                </div>
              <div class="about-site about-info">
                <section-title><span>❤</span>若兮开发团队</section-title>
                <div class="info-card">
                  <center>
                    <div style="width: 850px">
                      <v-container fluid>
                        <v-row justify="center">
                          <v-subheader>核心成员</v-subheader>

                          <v-expansion-panels popout>
                            <v-expansion-panel
                                v-for="(message, i) in messages"
                                :key="i"
                                hide-actions
                            >
                              <v-expansion-panel-header>
                                <v-row
                                    align="center"
                                    class="spacer"
                                    no-gutters
                                >
                                  <v-col
                                      cols="4"
                                      sm="2"
                                      md="1"
                                  >
                                    <v-avatar
                                        size="36px"
                                    >
                                      <img
                                          v-if="message.avatar"
                                          alt="Avatar"
                                          src="https://ruoqing-img.oss-cn-chengdu.aliyuncs.com/admin_img/yaoxian_qq.jpg"
                                      >
                                      <v-icon
                                          v-else
                                          :color="message.color"
                                          v-text="message.icon"
                                      ></v-icon>
                                    </v-avatar>
                                  </v-col>

                                  <v-col
                                      class="hidden-xs-only"
                                      sm="5"
                                      md="3"
                                  >
                                    <strong v-html="message.name"></strong>
                                    <span
                                        v-if="message.total"
                                        class="grey--text"
                                    >
                &nbsp;({{ message.total }})
              </span>
                                  </v-col>

                                  <v-col
                                      class="text-no-wrap"
                                      cols="5"
                                      sm="3"
                                  >
                                    <v-chip
                                        v-if="message.new"
                                        :color="`${message.color} lighten-4`"
                                        class="ml-0 mr-2 black--text"
                                        label
                                        small
                                    >
                                      {{ message.new }} new
                                    </v-chip>
                                    <strong v-html="message.title"></strong>
                                  </v-col>

                                  <v-col
                                      v-if="message.excerpt"
                                      class="grey--text text-truncate hidden-sm-and-down"
                                  >
                                    &mdash;
                                    {{ message.excerpt }}
                                  </v-col>
                                </v-row>
                              </v-expansion-panel-header>

                              <v-expansion-panel-content>
                                <v-divider></v-divider>
                                <v-card-text v-text="lorem"></v-card-text>
                              </v-expansion-panel-content>
                            </v-expansion-panel>
                          </v-expansion-panels>

                          <div style="margin-top: 50px">
                            <v-expansion-panels popout>
                              <v-expansion-panel
                                  v-for="(message, i) in messages1"
                                  :key="i"
                                  hide-actions
                              >
                                <v-expansion-panel-header>
                                  <v-row
                                      align="center"
                                      class="spacer"
                                      no-gutters
                                  >
                                    <v-col
                                        cols="4"
                                        sm="2"
                                        md="1"
                                    >
                                      <v-avatar
                                          size="36px"
                                      >
                                        <img
                                            v-if="message.avatar"
                                            alt="Avatar"
                                            src="https://ruoqing-img.oss-cn-chengdu.aliyuncs.com/admin_img/wangjingyun_qq.jpg"
                                        >
                                        <v-icon
                                            v-else
                                            :color="message.color"
                                            v-text="message.icon"
                                        ></v-icon>
                                      </v-avatar>
                                    </v-col>

                                    <v-col
                                        class="hidden-xs-only"
                                        sm="5"
                                        md="3"
                                    >
                                      <strong v-html="message.name"></strong>
                                      <span
                                          v-if="message.total"
                                          class="grey--text"
                                      >
                &nbsp;({{ message.total }})
              </span>
                                    </v-col>

                                    <v-col
                                        class="text-no-wrap"
                                        cols="5"
                                        sm="3"
                                    >
                                      <v-chip
                                          v-if="message.new"
                                          :color="`${message.color} lighten-4`"
                                          class="ml-0 mr-2 black--text"
                                          label
                                          small
                                      >
                                        {{ message.new }} new
                                      </v-chip>
                                      <strong v-html="message.title"></strong>
                                    </v-col>

                                    <v-col
                                        v-if="message.excerpt"
                                        class="grey--text text-truncate hidden-sm-and-down"
                                    >
                                      &mdash;
                                      {{ message.excerpt }}
                                    </v-col>
                                  </v-row>
                                </v-expansion-panel-header>

                                <v-expansion-panel-content>
                                  <v-divider></v-divider>
                                  <v-card-text v-text="lorem"></v-card-text>
                                </v-expansion-panel-content>
                              </v-expansion-panel>
                            </v-expansion-panels>
                          </div>
                        </v-row>
                      </v-container>
                    </div>
                  </center>
                  </div>
              </div>
            </div>
        </div>
    </div>
</template>
<script>
    import sectionTitle from '@/components/section-title'
    import {getTime,getTimeInterval} from '@/utils'
    // import Quote from "@/components/quote";
    // import {fetchFriend} from '../api'
    export default {
        name: "About",
        data() {
            return {
              list: [],
							messages: [
								{
									avatar: 'https://ruoqing-img.oss-cn-chengdu.aliyuncs.com/admin_img/yaoxian_qq.jpg',
									name: '姚显',
									title: '互联网Java全栈工程师',
									excerpt: '在校大学生,2022届毕业生,就读于江汉大学',
								},
								{
									color: 'red',
									icon: 'mdi-account-multiple',
									name: '项目经验',
									new: 1,
									total: 3,
									title: '从单体商城,到分布式、微服务系统',
								},
								{
									color: 'teal',
									icon: 'mdi-tag',
									name: '社交网络',
									new: 2,
									total: 4,
									title: 'QQ、微信等多种流行通讯软件',
									exceprt: 'New deals available, Join Today',
								},
							],
							messages1: [
								{
									avatar: 'https://avatars0.githubusercontent.com/u/9064066?v=4&s=460',
									name: '王靖云',
									title: 'C++工程师,运维工程师',
									excerpt: '在校大学生,2022届毕业生,就读于江汉大学',
								},
								{
									color: 'red',
									icon: 'mdi-account-multiple',
									name: '项目经验',
									new: 1,
									total: 3,
									title: '类似于QQ的即时通讯软件',
								},
								{
									color: 'teal',
									icon: 'mdi-tag',
									name: '社交网络',
									new: 2,
									total: 4,
									title: 'QQ、微信等多种流行通讯软件',
									exceprt: 'New deals available, Join Today',
								},
							],
							lorem: '一个自学Java两年的小废物,从大一下学期开始接触Java,到后来每天学习10个小时Java,从入门到入魔,掉发小能手。有道无术,术尚可求;有术无道,止于术。学习编程不仅仅是学习框架语法等等,而是学习编程的思想,以及自学和动手的能力。学习Java,要完全把思想转换到万物皆对象中来。',

						}
        },
        components: {
            // Quote,
            sectionTitle
        },
        methods: {},
        mounted() {
        }
    }
</script>
<style scoped lang="less">
    .about {
        padding-top: 40px;
    }

    .content-warp {
        margin-top: 80px;

        .about-info {
            margin: 30px 0;

            span {
                color: red;
                margin-right: 10px;
            }

            .info-card {
                min-height: 100px;
                width: 900px;
                padding: 20px;
                border-radius: 3px;
                margin: 30px 0 50px 0;
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                p{
                    line-height: 1.7rem;
                }
            }
        }
        .contactForm{
            width: 100%;
            padding: 20px;
            .form-item{
                align-items: center;
                display: flex;
                &:not(:last-child){
                    margin-bottom: 20px;
                }
                label{
                  width: 80px;
                }
                .v{
                    min-height: 40px;
                    line-height: 20px;
                    border-radius: 3px;
                    padding: 2px 10px;
                    outline:none;
                    border: 1px solid #8fd0cc;
                    width: 100%;
                    resize: vertical;
                }
                button{
                    width: 100px;
                    height: 40px;
                    border-radius: 3px;
                    outline:0;
                    border-style: none;
                    cursor: pointer;
                    background-color: #409eff;
                    color: white;
                    &:hover{
                        opacity: 0.8;
                    }
                }
            }
        }
    }

    /*******/
    @media (max-width: 800px) {
        .content-warp {
            margin-top: 0;
        }
    }
</style>
